<template>
	<view>

		<!-- 轮播 -->
		<view class="brand_island">
			<swiper class="swiper" keyName="image_path" circular interval="3000" duration="500" autoplay>
				<swiper-item v-for="item in brandList" :key="item.id" >
					<view class="swiper_box flex_c" @click="changeUrl(item.url)">
						<image
							:src="item.image"
							mode="aspectFit"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 课程分类 -->
		<view class="curriculum flex_Z">
			<!-- <text class="c5">课程分类</text> -->
			<view class="course_list flex_left">
				<view class="course_box flex_left" @click="goNextPage(item)" v-for="item in courseList" :key="item.id">
					<view class="course flex_ZC" >
						<image :src="item.image"
							mode="aspectFit"></image>
						<view class="text">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import {article} from "../../api/index.js";
	import { category } from "../../api/other.js"
	import {
		showSlide,
	} from "../../api/join.js"
	export default {
		data() {
			return {
				brandList: [], //轮播
				courseList: [] //文章
			}
		},
		onLoad() {
			this.getswiper()
			this.isArticle()
		},
		methods: {
			getswiper(){
				showSlide({
					type:3
				}).then(res=>{
					this.brandList=res.data
				})
			},
			// 初始化列表
			isArticle() {
				category().then(res => {
					console.log(res);
			
					this.courseList = res.data
				})
			},
			goNextPage(item) {
				uni.navigateTo({
					url: "/pageDao/Dao/daolist?id="+item.id
				})
			},
			// 跳转页面
			changeUrl(url) {
				console.log(url);
				// 截取路径
				var domain = url.indexOf('fulezhenxuan');
				if (domain != -1) {
					var path = url.split('#');
					console.log('1111', path[1])
					// console.log('2222',path[1].split("?")[0]);
					// console.log('3333',path[1].split("?")[1]);
					let urls = path[1]
					uni.navigateTo({
						url: urls
					})
				}
			}
		},
	}
</script>

<style scoped>
	.brand_island {
		width: 92%;
		height: 320rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		/* transform: translateY(-130rpx); */
	}

	.swiper {
		width: 690rpx;
		height: 320rpx;
	}

	.swiper_box {
		position: relative;
		width: 690rpx;
		height: 320rpx;
		line-height: 308rpx;
		text-align: center;
		background: #00000025;
		border-radius: 80rpx;
		border-radius: 20rpx;
	}

	.swiper_box>image {
		width: 100%;
		height: 100%;
		z-index: 2;
		border-radius: 20rpx;
	}

	.emptys {
		width: 100%;
		height: 100rpx;
	}

	.curriculum>text {
		font-family: iconfont2;
		font-size: 44rpx;
		margin-left: 30rpx;
	}

	.course_list {
		width: 94%;
		margin: 30rpx auto 0;
	}

	.course_box {
		width: 30%;
		margin: 14rpx 10rpx;
	}

	.course {
		width: 216rpx;
		height: 336rpx;
		/* background: linear-gradient(274deg, #AB8E68, #D7BA93); */
		border-radius: 8rpx;
	}

	.course>image {
		width: 206rpx;
		height: 264rpx;
		margin: 6rpx 2rpx;
	}

.text{
	 width: 208rpx;
	 height: 80rpx;
	            font-size: 28rpx;
	            color: #333;
	            margin-top: 10rpx;
				text-align: center;
	            text-overflow: ellipsis;
	          
	            overflow: hidden;
	            line-height: 1.2;
}
</style>